<template>
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      :ellipsis="false"
      @select="handleSelect"
      style="display: flex; align-items: center; justify-content: space-between;"
    >
      <!-- 左边部分：博客标题 -->
      <div class="menu-left" style="display: flex; align-items: center;">
        <el-menu-item index="0">
          <h1 style="margin: 0;">我的博客</h1>
        </el-menu-item>
      </div>
  
      <!-- 中间部分：搜索框 -->
      <div class="menu-center" style="flex-grow: 1; text-align: center;">
        <el-input
          v-model="input"
          style="max-width: 600px; margin: 0 auto;"
          placeholder="搜索博客"
          class="input-with-select"
        >
          <template #append>
            <el-button :icon="Search" @click="searchBlog">搜索</el-button>
          </template>
        </el-input>
      </div>
  
      <!-- 右边部分：菜单选项 -->
      <div class="menu-right" style="display: flex; align-items: center;">
        <el-menu-item index="1">我的博客</el-menu-item>
        <el-sub-menu index="2">
          <template #title>欢迎你 {{ userStore.userInfo.name }}</template>
          <el-menu-item index="2-1" @click="manageUser">管理账户</el-menu-item>
          <el-menu-item index="2-2" @click="manageBlogs">管理我的博客</el-menu-item>
          <el-menu-item index="2-3">退出登录</el-menu-item>
        </el-sub-menu>
      </div>
    </el-menu>
  </template>
  
  <script setup>
  import { ref, getCurrentInstance } from 'vue';
  import { Search } from '@element-plus/icons-vue';
  import { useUserStore } from '../plugins/pinia';
  
  // 响应式状态定义
  const input = ref(''); // 用户搜索输入
  const activeIndex = ref('1'); // 菜单项激活索引
  const userStore = useUserStore();
  const userId = userStore.userInfo.id;
  
  // 获取当前组件实例以访问 $axios
  const { proxy } = getCurrentInstance();
  
  // 搜索博客的函数
  const searchBlog = async () => {
    if (!input.value.trim()) {
      proxy.$message.warning('请输入要搜索的内容');
      return;
    }
  
    try {
      const response = await proxy.$axios.get(`/blog/s01/${input.value}`);
      if (response.data.data && response.data.data.length > 0) {
        // 触发事件将搜索结果发送给父组件
        proxy.$emit('updateBlogs', response.data.data);
        proxy.$message.success('搜索成功');
      } else {
        proxy.$emit('updateBlogs', []); // 传递空结果以清空博客列表
        proxy.$message.warning('没有找到匹配的博客');
      }
    } catch (error) {
      console.error('Error fetching data:', error);
      proxy.$message.error('搜索过程中出现错误，请稍后重试');
    }
  };
  
  // 管理博客
  const manageBlogs = () => {
    proxy.$emit('navigateToUserBlogs', userId);
  };
  const manageUser = () => {
    proxy.$emit('navigateToUser');
  };
  
  // 处理菜单选择事件
  const handleSelect = (key, keyPath) => {
    console.log('Selected key:', key, 'KeyPath:', keyPath);
  };
  
  // 定义 handleOpen 和 handleClose 函数（备用的逻辑）
  const handleOpen = (key, keyPath) => {
    console.log('Opened menu:', key, 'KeyPath:', keyPath);
  };
  const handleClose = (key, keyPath) => {
    console.log('Closed menu:', key, 'KeyPath:', keyPath);
  };
  </script>
  
  <style scoped>
  /* 样式增强 */
  .el-menu-demo {
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
  }
  
  .menu-left,
  .menu-right {
    white-space: nowrap; /* 防止菜单项折行 */
  }
  </style>
  